<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '促销活动管理'}, {name: '活动详情'}]"></v-breadcrumb>

        <div class="g-box">
            <div class="table">
                <table class="width100 vd-table">
                    <tbody>
                    <tr>
                        <td style="width:130px">活动ID</td>
                        <td>{{info.id}}</td>
                    </tr>
                    <tr>
                        <td>活动类型</td>
                        <td>
                            <el-button v-preventDbClick v-for="(item,index) in promotionTypes" :key="index"
                                       v-if="item.id==info.type"
                                       plain size="mini" :type="item.type">
                                {{item.name}}
                            </el-button>
                        </td>
                    </tr>
                    <tr>
                        <td>活动状态</td>
                        <td>
                            <el-button v-preventDbClick v-for="(item,index) in promotionStatuses" :key="index"
                                       v-if="item.id==info.status"
                                       plain size="mini" :type="item.type">
                                {{item.name}}
                            </el-button>
                        </td>
                    </tr>
                    <tr class="c-pointer">
                        <td>商品</td>
                        <td>
                            <div class="flex-center flex-start">
                                <el-image style="width:60px;height:60px;border-radius:5px;" fit="cover"
                                          :src="info.goods_image"></el-image>
                                <div class="ml-10">
                                    <div class="t-hidden" style="max-width:350px;">{{info.goods_name}}</div>
                                    <div class="mt-10 color-666">零售价：{{info.goods_price}}元</div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>活动优惠价</td>
                        <td>{{info.promotion_price}}元</td>
                    </tr>
                    <tr>
                        <td>已售/限额</td>
                        <td>{{info.sales}}件/{{info.sale_limit+'件'||'不限制'}}</td>
                    </tr>
                    <tr>
                        <td>开始时间</td>
                        <td>{{info.start_time|formatDateTime}}</td>
                    </tr>
                    <tr>
                        <td>结束时间</td>
                        <td>{{info.end_time|formatDateTime}}</td>
                    </tr>
                    <tr class="c-pointer" v-if="info.is_partner==1">
                        <td>合伙人</td>
                        <td>
                            <div class="flex-center flex-start">
                                <el-image style="width:60px;height:60px;border-radius:5px;" fit="cover"
                                          :src="info.partner_image"></el-image>
                                <div class="ml-10">
                                    <div class="t-hidden" style="max-width:350px;">微信昵称：{{info.partner_nickname}}
                                    </div>
                                    <div class="mt-10 color-666">真实姓名：{{info.partner_real_name||'无'}}</div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="info.is_partner==1">
                        <td>合伙人佣金比例</td>
                        <td>{{info.partner_commission_percentage}}%
                        </td>
                    </tr>
                    <tr>
                        <td>操作</td>
                        <td>
                            <el-button v-preventDbClick
                                       v-if="info.status==5||info.status==7||info.status==8||info.status==10"
                                       @click="pause" type="warning" class="width-100">暂时下线
                            </el-button>
                            <el-button v-preventDbClick v-if="info.status==9" @click="restart" type="success"
                                       class="width-100">重启
                            </el-button>
                            <el-button v-preventDbClick v-if="info.status!=11&&info.status!=15" @click="stop"
                                       type="danger" class="width-100">结束
                            </el-button>
                            <el-button v-preventDbClick v-if="info.status==11" @click="distributeCommission"
                                       type="danger" class="width-100">分配佣金
                            </el-button>
                            <el-button v-preventDbClick @click="gotoPage('/promotion/list')" type="info">返回活动列表
                            </el-button>
                        </td>
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>

        <div class="g-box mt-15">
            <div class="font20 mb-10 bold">促销活动的订单</div>
            <el-table :data="orders" :fit="true" stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="110"></el-table-column>
                <el-table-column label="用户" width="66">
                    <template slot-scope="scope">
                        <el-image
                            style="font-size:0;width:44px;height:44px;margin:0;padding:0;position:relative;top:3px;"
                            fit="cover"
                            :preview-src-list="[scope.row.user_image]"
                            :src="scope.row.user_image">
                            <div slot="error" style="width:100%;height:100%;border:1px solid #eee;font-size:0;"
                                 class="image-slot color-999 font12 flex-center">暂无<br/>图片
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="user_nickname" label="用户昵称" width="200"></el-table-column>
                <el-table-column label="商品1">
                    <template slot-scope="scope">
                        <div class="flex-center flex-start" style="max-width:300px;min-width:150px;">
                            <el-image
                                style="font-size:0;width:44px;height:44px;margin:0;padding:0;position:relative;top:3px;"
                                fit="cover"
                                :preview-src-list="[scope.row.goodses[0]['goods_image']]"
                                :src="scope.row.goodses[0]['goods_image']">
                            </el-image>
                            <div style="flex:1;width:0;" class="ml-5">
                                <div style="width:100%;" class="t-hidden">{{scope.row.goodses[0]['goods_name']}}</div>
                                <div>
                                    {{((Number(scope.row.goodses[0].goods_price)+Number(scope.row.goodses[0].spec_prices))).toFixed(2)}}元
                                    × {{scope.row.goodses[0].len}}件
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="prices" label="价格" width="100"></el-table-column>
                <el-table-column label="活动类型" width="110">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick v-for="(item,index) in promotionTypes" :key="index"
                                   v-if="scope.row.promotion_type==item.id"
                                   plain size="mini" :type="item.type">
                            {{item.name}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="配送方式" width="110">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick v-for="(item,index) in takeGoodsTypes" :key="index"
                                   v-if="item.id==scope.row.take_goods_type"
                                   plain size="mini" :type="item.type">
                            {{item.name}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick v-for="(item,index) in orderStatuses" :key="index"
                                   v-if="scope.row.status==item.id"
                                   plain size="mini" :type="item.type">
                            {{item.name}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="下单时间" width="166">
                    <template slot-scope="scope">
                        <div>{{scope.row.c_time|formatDateTime}}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" border width="70" label="操作">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" title="详情"
                                   @click="gotoPage('/order/detail?id='+scope.row.id)"
                                   type="primary" icon="el-icon-view" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            id: 0,
            info: '',
            promotionTypes: config.promotionTypes,
            promotionStatuses: config.promotionStatuses,
            orderStatuses: config.orderStatuses,
            takeGoodsTypes: config.takeGoodsTypes,
            orders: []
        };
    },

    computed: {},

    mounted() {
    },

    created() {
        this.id = this.$route.query.id ? this.$route.query.id : 0;
        this.getData();
    },

    methods: {
        distributeCommission() {
            this.$confirm('确定分配佣金吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/promotion/distributeCommission',
                    data: {id: this.id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData(true);
                    })
                })
            });
        },
        stop() {
            this.$confirm('确定要结束活动吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/promotion/stop',
                    data: {id: this.id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData(true);
                    })
                })
            });
        },
        restart() {
            this.$confirm('确定要重启活动吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/promotion/restart',
                    data: {id: this.id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData(true);
                    })
                })
            });
        },
        pause() {
            this.$confirm('确定要暂停吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/promotion/pause',
                    data: {id: this.id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData(true);
                    })
                })
            });
        },
        getData() {
            request({
                url: '/manage/promotion/list',
                data: {id: this.id}
            }).then((res) => {
                this.info = res.data.data[0];
                request({
                    url: '/manage/promotion/getOrderByPromotionId',
                    data: {id: this.id}
                }).then((res) => {
                    this.orders = res.data;
                })
            })
        },
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");

tr {
    height: 50px;
}

</style>

